<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <!--v-if判断vue中变量的值如果为true则显示元素 否则不显示
    如果是false 元素不会被创建-->
    <p v-if="isShow">我是p1标签</p>
    <!--v-show作用和v-if一样, 区别是 当值为false 元素依然会被创建出来
    只不过设置了一个隐藏的样式-->
    <p v-show="isShow">我是p2标签</p>

    <!-- v-bind:属性名,  让元素的某个属性和变量进行绑定  -->
    <a v-bind:href="myurl">我是超链接1</a>
    <a :href="myurl" >我是超链接2</a>
    <!--v-on:事件名  给元素绑定事件，
    事件触发的方法需要在vue对象的methods里面写 @事件名是简写-->
    <input type="button" value="按钮1" v-on:click="fn1()">
    <input type="button" value="按钮2" @click="fn1()">
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:"div",
        data:{
            myurl:"http://www.baidu.com",
            isShow:true
        },
        methods:{
            fn1:function () {
                alert("按钮点击了！");
            }
        }
    })
</script>
</body>
</html>